<template>
  <div class="about">
    <el-carousel height="350px">
      <el-carousel-item v-for="item in 4" :key="item">
        <img src="../assets/banner.png" alt="" />
      </el-carousel-item>
    </el-carousel>
    <div class="search">
      <el-autocomplete
        placeholder="请输入医院名称"
        style="width: 90%; margin-right: 10px"
        v-model="name"
        @select="handl"
        :fetch-suggestions="querySearch"
      ></el-autocomplete>
      <el-button type="primary" :icon="Search">搜索</el-button>
    </div>
    <el-row :span="24">
      <el-col :span="24">
        <p class="hospital">医院</p>
        <ul>
          <span class="span1">等级:</span>
          <li
            v-for="(item, index) in hosdata"
            @click="djqh(index, item.id)"
            :class="curr == index ? 'liac' : ''"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>

        <ul>
          <span class="span1">地区:</span>
          <li
            v-for="(item, index) in hosdata1"
            @click="djqh1(index, item.id)"
            :class="curr1 == index ? 'liac' : ''"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="cardlb">
          <el-card
            v-if="hospitaldata.length !== 0"
            shadow="hover"
            class="hover1"
            v-for="(item, index) in hospitaldata"
            @click="djjrxqy(item.hoscode)"
          >
            <div>
              <p>{{ item.hosname }}</p>
              <div class="xuanx">
                <el-icon><Pointer /></el-icon
                ><span style="margin-right: 35px">{{
                  item.param.hostypeString
                }}</span>
                <el-icon><Clock /></el-icon
                ><span>每天{{ item.bookingRule.releaseTime }}放票</span>
              </div>
            </div>
            <div>
              <img
                class="hoverimg"
                :src="`data:image/jpeg;base64,${item.logoData}`"
                alt=""
              />
            </div>
          </el-card>
          <el-empty v-else></el-empty>
        </div>
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
          class="mt-4"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import instance from "../assets/axios";
import {
  Clock,
  Check,
  Pointer,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
const hosdata = ref([]);
const hospitaldata = ref([]);
const name = ref("");
const hosdata1 = ref([]);
const router = useRouter();
const page = ref(1);
const curr = ref(0);
const hostype = ref("");
const districtCode = ref("");
const total = ref(0);
const curr1 = ref(0);
const djjrxqy = (i) => {
  router.push({
    path: "/about1",
    query: {
      id: i,
    },
  });
};
const getData = async () => {
  const res = await instance.get("/api/cmn/dict/findByDictCode/HosType");
  console.log(res);
  hosdata.value = res.data;
  hosdata.value.unshift({
    id: "",
    name: "全部",
  });
};
const handleCurrentChange = (e) => {
  page.value = e;
  getdata2();
};
const handl = (e) => {
  router.push({
    path: "/about1",
  });
};
const querySearch = async (queryString, cb) => {
  if (queryString !== "") {
    const res = await instance.get(
      `api/hosp/hospital/findByHosname/${queryString}`
    );
    console.log(res.data);
    let arr = [];
    res.data.forEach((el) => {
      console.log(el);
      arr.push({
        value: el.hosname, //展示的医院的名字
        hoscode: el.hoscode, //存储医院的编码
      });
      console.log(arr);
    });
    cb(arr);
  } else {
  }
};
const createFilter = (queryString) => {
  return (
    //restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) == 0
    /*index==0表示是否在第一个索引位置找到输入的字符，*/
    hospitaldata.value.indexOf(queryString) != -1 //这个语句表示只有有关键字即可，不论在哪个位置匹配到
  );
};
const getData1 = async () => {
  const res = await instance.get("/api/cmn/dict/findByDictCode/Beijin");
  console.log(res);
  hosdata1.value = res.data;
  hosdata1.value.unshift({
    id: "",
    name: "全部",
  });
};
const getdata2 = async () => {
  const res = await instance.get(
    `/api/hosp/hospital/${page.value}/10?hostype=${hostype.value}&districtCode=${districtCode.value}`
  );
  console.log(res);
  hospitaldata.value = res.data.content;
  total.value = res.data.totalElements;
};
const djqh = (i, a) => {
  curr.value = i;

  if (i == 0) {
    hostype.value = "";
  } else {
    hostype.value = i;
  }
  getdata2();
};
const djqh1 = (i, a) => {
  curr1.value = i;
  districtCode.value = a;
  getdata2();
};
onMounted(() => {
  getData();
  getData1();
  getdata2();
});
</script>
<style>
.hoverimg {
  width: 50px;
  border-radius: 50%;
  height: 50px;
}
.hover1 .el-card__body {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.xuanx {
  margin-top: 15px;
}
.hover1 {
  margin-bottom: 20px;
  width: 48%;
  display: flex;
  justify-content: space-between;
}
p {
  margin: 0px !important;
}
.cardlb {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.liac {
  color: #55a6fe;
}
.hospital {
  color: #7f7f7f;
  font-weight: 900;
}
.el-carousel__item img {
  width: 100%;
  height: 100%;
}
.search {
  margin: 10px 0px;
  text-align: center;
}
</style>
